<template>
	<view>
		<view class="header">
			<view style="margin-left: 24rpx;" @click="selectHandle(0)" :class="current == 0 ? 'textSelectd' : ''">今日</view>
			<view @click="selectHandle(1)" :class="current == 1 ? 'textSelectd' : ''">本周</view>
			<view class="" @click="current = 2">
				<ms-dropdown-menu>
					<ms-dropdown-item :hasSlot="true" :title="monthItem ? monthItem + '月' : '月'" ref="dropdownItem1" style="margin-right: 62rpx;">
						<view class="dropdown-item-content backgroundColor" style="padding-top: 0;">
							<view class="address" style="margin-left: 0;">
								<view
									class="addressSelect"
									@click="monthSelectBtn(item, index)"
									:class="{ addressSelected: index == monthIndex }"
									v-for="(item, index) in monthList1"
									:key="index"
								>
									{{ item + '月' }}
								</view>
							</view>
						</view>
					</ms-dropdown-item>
					<ms-dropdown-item :hasSlot="true" :title="yearItem ? yearItem + '年' : '年'" ref="dropdownItem2">
						<view class="dropdown-item-content backgroundColor" style="padding-top: 0;">
							<view class="address" style="margin-left: 0;">
								<view
									class="addressSelect"
									@click="yearSelectBtn(item, index)"
									:class="{ addressSelected: index == yearIndex }"
									v-for="(item, index) in yearsList1"
									:key="'a' + index"
								>
									{{ item + '年' }}
								</view>
							</view>
						</view>
					</ms-dropdown-item>
				</ms-dropdown-menu>
			</view>
		</view>
		<view style="width: 750rpx;height: 2rpx;background-color: #d7d7d7;margin-top:1rpx;"></view>
		<view class="date borderBottom20">
			<view class="date_item" style="margin-left: 26rpx;">
				<dyDatePicker
					placeholder="起始日期"
					:childValue="dateFrom"
					:minSelect="from_minSelect"
					:maxSelect="from_maxSelect"
					:iconshow="false"
					@getData="getFromData"
				></dyDatePicker>
				<image src="../../static/img/teacher/center/calendar.png" mode=""></image>
			</view>
			<view class="filter_inputline"></view>
			<view class="date_item">
				<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect" :childValue="dateTo" :maxSelect="to_maxSelect" :iconshow="false" @getData="getToData"></dyDatePicker>
				<image src="../../static/img/teacher/center/calendar.png" mode=""></image>
			</view>
			<view class="check" @click="checkDate">查询</view>
		</view>
		<view class="charts borderBottom20">
			<view style="display: flex;justify-content: center;position: relative;background: #fff;height: 452;overflow: hidden;">
				<cmd-circle
					cid="circle19"
					type="circle"
					:percent="Number(ordernumber)"
					:showInfo="false"
					:width="231"
					:stroke-width="14"
					stroke-shape="round"
					stroke-color="#6971f9"
					stroke-background="#e3e9f4"
				></cmd-circle>
				<view style="position: absolute;text-align: center;top: 33%;">
					<view style="font-size: 52rpx;color: #333333;margin-bottom: 36rpx;">{{ ordernumber ? ordernumber + '/单' : '暂无' }}</view>
					<view style="font-size: 40rpx;color: #666666;">订单数</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="order" v-for="(item, index) in list" :key="'b' + index">
				<view class="order_left">
					<view>时间：{{ item.yuyuedate }}</view>
					<view>学员：{{ item.realname }}</view>
					<view>订单：{{ item.ordernumber }}</view>
				</view>
				<view class="order_right">
					<view>科目：{{ item.subjectstitle }}</view>
					<view>{{item.yuyuenumber==true?'圈数':'时长'}}：{{ item.yuyuenumber || item.yuyueclasshour }}</view>
					<view class="price">金额：￥{{ item.money }}</view>
				</view>
			</view>
		</view>
		<view v-show="loadingShow" class="loading">{{ loadingText }}</view>
	</view>
</template>

<script>
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var monthList = [];
var yearsList = [];
for (let i = 1; i <= 12; i++) {
	monthList.push(i);
}
for (let i = 2018; i <= year + 20; i++) {
	yearsList.push(i);
}
import { teacherCharts } from '@/api/teacher/charts/charts.js';
import dyDatePicker from '../../components/dy-Date/dy-Date.vue';
import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue';
import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue';
import cmdCircle from '@/components/cmd-circle/cmd-circle.vue';
export default {
	components: {
		msDropdownMenu,
		msDropdownItem,
		dyDatePicker,
		cmdCircle
	},
	data() {
		return {
			list: [
				// {
				// 	order: 45655645565,
				// 	name: '张三',
				// 	lesson: '科目二',
				// 	time: '2019-10-28  上午',
				// 	roundNumer: 1,
				// 	date: '2019-05-24  14:30:12',
				// 	state: 1,
				// 	price: 60.0
				// },
			],
			monthList1: [],
			yearsList1: [],
			monthIndex: 0,
			yearIndex: 0,
			current: 0,
			from_minSelect: '2015/01/01',
			from_maxSelect: '2050/12/31',
			to_minSelect: '1900/01/01',
			to_maxSelect: '2050/12/31',
			dateTo: '',
			dateFrom: '',
			yearItem: '',
			monthItem: '',
			ordernumber: '',
			page: 1,
			loadingText: '加载中...', //加载状态
			loadingShow: true,
			dateType:1,	//1今日，2本周，3按月，4时间段
		};
	},
	async onLoad() {
		this.monthList1 = monthList;
		this.yearsList1 = yearsList;
		let res = await teacherCharts(1);
		this.getlist(res);

		this.monthIndex = month;
		this.yearIndex = year - 2018;
	},
	onReachBottom() {
		this.loadMore();
	},
	methods: {
		async loadMore(){
			let res = await teacherCharts(this.dateType,this.monthItem,this.yearItem,this.dateFrom,this.dateTo,++this.page);
			this.getlist(res)
		},
		getlist(res) {
			if (res.data.order.data.length == 0) {
				this.loadingText = '没有数据了！';
			} else if (res.data.order.data.length < 10) {
				this.loadingText = '没有数据了！';
			} else {
				this.loadingText = '加载中';
			}
			if (this.page == 1) {
				this.list = res.data.order.data;
			} else {
				this.list = this.list.concat(res.data.order.data);
			}
			if (this.list.length > 0) {
				this.loadingShow = true;
			} else {
				this.loadingShow = false;
			}
			this.ordernumber = res.data.ordernumber;
		},
		async monthSelectBtn(item, index) {
			this.page=1;
			this.monthIndex = index;
			this.monthItem = item;
			this.dateFrom='';
			this.dateTo='';
			this.$refs.dropdownItem1.closePopup();
			this.dateType=3;
			let res = await teacherCharts(3, this.monthItem, this.yearItem);
			this.getlist(res);
		},
		async yearSelectBtn(item, index) {
			this.page=1;
			this.yearIndex = index;
			this.yearItem = item;
			this.dateFrom='';
			this.dateTo='';
			this.$refs.dropdownItem2.closePopup();
			this.dateType=3;
			let res = await teacherCharts(3, this.monthItem, this.yearItem);
			this.getlist(res);
		},
		async selectHandle(index) {
			this.page=1;
			this.current = index;
			this.dateType=index + 1
			let res = await teacherCharts(this.dateType);
			this.getlist(res);
			this.monthItem = '';
			this.yearItem = '';
			this.dateFrom='';
			this.dateTo='';
			this.$refs.dropdownItem1.closePopup();
			this.$refs.dropdownItem2.closePopup();
		},
		async checkDate() {
			this.page=1;
			if (this.dateFrom == '' || this.dateTo == '') {
				uni.showToast({
					title: '请选择起始日期或结束日期',
					icon: 'none',
					duration: 2000
				});
			} else {
				this.yearItem = '';
				this.monthItem = '';
				this.dateType=4;
				let res = await teacherCharts(4, '', '', this.dateFrom, this.dateTo);
				this.getlist(res);
			}
		},
		getFromData(time) {
			this.to_minSelect = time;
			this.dateFrom = time;
		},
		getToData(time) {
			this.from_maxSelect = time;
			this.dateTo = time;
		}
	}
};
</script>

<style lang="scss">
@import './css/chartsCenter.scss';
</style>
